<template>
	<view>
		<view class="top-background">
			<view class="user-info" :style="'top:'+userInfoHeight+'px'">
				<image v-if="userInfo.user_info.photo_url" :src="userInfo.user_info.photo_url"></image>
				<image v-if="!userInfo.user_info.photo_url" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/aueco_wxapp/default.png"></image>
				<text v-if="userInfo.user_info">{{userInfo.user_info.nickname}}</text>
				<button v-if="!userInfo.user_info" class="login_btn" open-type="getUserInfo" @getuserinfo="login">注册/登录</button>
			</view>
			<view class="member">
				<view class="member-text">
					<text>邀请小伙伴</text>
					<text>赚更多钱，还有升级奖励</text>
				</view>
				<view class="member-button" @click="createPoster">邀请海报></view>
			</view>
		</view>
		<!-- 海报显示 -->
		<u-popup v-model="showPoster" mode="center" closeable="true">
			<view style="overflow: hidden;">
				<image mode="aspectFit" style="width: 77vw;height: 67vh;padding: 20px 20px 70px;" show-menu-by-longpress="true" :src="posterImage"></image>
				<view style="display: flex;justify-content: space-around;margin: 25px;margin-top: -55px;">
					<button class="shareBtn" open-type="share">分享给好友</button>
					<button class="shareBtn" @click="saveImage">保存图片</button>
				</view>
			</view>
		</u-popup>

		<!-- 中间菜单栏 -->
<!--		<view style="margin-top: 80rpx">-->
<!--&lt;!&ndash;			<person-order-panel ref="order" />&ndash;&gt;-->
<!--		</view>-->
		<!-- 中间菜单栏 -->

		<view style="margin-top: 80rpx;width: 100vw;height: 8px;background-color: #EFEFEF;"></view>

		<distribute-panel :userInfo="userInfo" />

		<!-- 列表栏 -->
		<view class="list">

			<view class="list_item">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<image src="../../static/person/phone.png"/>
					<text>绑定手机</text>
					<view class="list_item_arrow phone-spec">
						<text v-if="userInfo&&userInfo.phone">{{userInfo.phone}}</text>
						<text v-else style="color: #15559a">绑定手机号</text>
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</button>
			</view>

			<view class="list_item">
				<navigator v-if="userInfo.user_info" hover-class="none" url="../address/address?type=address">
					<image src="../../static/person/shouhuodizhi.png"/>
					<text>收货地址</text>
					<view class="list_item_arrow">
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</navigator>
				<button v-if="!userInfo.user_info" open-type="getUserInfo" @getuserinfo="login">
					<image src="../../static/person/shouhuodizhi.png"/>
					<text>收货地址</text>
					<view class="list_item_arrow">
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</button>
			</view>

			<view class="list_item">
				<navigator hover-class="none" url="../coupon/coupon">
					<image src="../../static/person/jiamen.png"/>
					<text>我的优惠券</text>
					<view class="list_item_arrow">
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</navigator>
			</view>

			<contact-button ref="contact" style="width: 100%">
				<view class="list_item">
					<image src="../../static/person/lianxikefu.png"/>
					<text>联系客服</text>
					<view class="list_item_arrow">
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</view>
			</contact-button>

			<view class="list_item" v-if="is_aboutUs_show">
				<navigator hover-class="none" url="../aboutUs/index">
					<image src="../../static/person/shezhi.png"/>
					<text>关于我们</text>
					<view class="list_item_arrow">
						<image src="../../static/person/fanhui.png" alt=""/>
					</view>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	import personOrderPanel from '../../components/person-order-panel/index'
  	import contactButton from '../../components/contact-button/index'
	import posterPanel from '../../components/poster-panel/index'
	import distributePanel from '../../components/distribute-panel/index'
	export default {
		components: {
			personOrderPanel,
      		contactButton,
			posterPanel,
			distributePanel
		},
		data() {
			return {
				userInfo: '',
				userInfoHeight: 55,//用户头像和名字距离上面距离
				is_aboutUs_show: true,//判断关于我们是否有内容，没有则不显示
				user_id: '',
				showPoster:false, //展示海报
				posterImage:""
			}
		},
		onShow(){
            this.getUserInfos()
			this.getAboutUs() //判断关于我们是否有内容，没有则不展示
        },
		onLoad(options){
			if(options.user_id){
				wx.setStorageSync("invited_user_id",options.user_id)
				console.log('我的页面邀请人ID',wx.getStorageSync("invited_user_id"))
			}
			this.getSystemInfo();
		},

		onShareAppMessage(res) {
			return {
				title: '邀请你加入',
				path: '/pages/person/person?user_id=' + this.userInfo.id,
				imageUrl:this.posterImage
			}
		},

		methods: {

			//微信授权
			async login(e) {
				const data = await this.$currency.bindGetUserInfo(e.detail.userInfo,this.$baseUrl)
				if(data=="success"){
					await this.getUserInfos()
				}
			},

			//绑定手机号码
			async getPhoneNumber(e) {
				const data = await this.$currency.getPhoneNumber(e, this.$baseUrl)
				if(data==='success'){
					await this.getUserInfos()
				}
			},

			//获取用户信息
			async getUserInfos() {
				const userInfo = await this.$currency.getUserInfos(this.$baseUrl)
				if(userInfo){
					this.userInfo = userInfo
					// this.$refs.order.getOrderStatusNum() //更新订单数据
				}
				this.$refs.contact.updateData() //更新客服信息
			},

			//获取状态栏高度
			getSystemInfo() {
				let systemInfo = wx.getSystemInfoSync();
				let statusBarHeight = systemInfo.statusBarHeight;
				if(systemInfo.system.search("iOS")==0){
					this.userInfoHeight = 10+statusBarHeight
				}else{
					this.userInfoHeight = 20+statusBarHeight
				}
			},

			//获取关于我们
			async getAboutUs() {
			  let res = await this.$api.getAboutUs({},this.$baseUrl)
			  if (res.data.level == 'success') {
			    this.is_aboutUs_show = res.data.data.detail?true:false
			  } else {
			    this.$currency.showToast(res.data.message, 'none', 1500)
			  }
			},

			//保存图片到手机
			saveImage() {
				wx.authorize({
					scope: 'scope.writePhotosAlbum',
					success: (res) => {
						wx.showLoading({
							title: "保存中"
						})
						wx.downloadFile({
							url: this.posterImage,
							success: (res) => {
								wx.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									complete: () => {
										wx.hideLoading()
									}
								})
							}
						})

					},
					fail: (res) => {
						wx.hideLoading()
					}
				})
			},
			createPoster() {
				if (wx.getStorageSync("userToken") != "") {
					wx.showLoading({
						title: "生成中...",
						mask: true,
					})
					this.$api.getShareImg({},this.$baseUrl).then(res => {
						if (res.data.level = "success") {
							wx.hideLoading();
							wx.showToast({
								title: res.data.message,
								duration: 1500,
								icon: "none"
							});
							this.showPoster = true
							this.posterImage = res.data.data.share_img_url
						} else {
							this.$currency.showToast('生成失败')
							wx.hideLoading();
						}

					})
				} else {
					this.$currency.bindGetUserInfo()
				}
			},




		}
	}
</script>

<style scoped lang="scss">
	.shareBtn{
		width: 40%;
		height: 40px;
		line-height: 40px;
		background: #1AC170;
		color: #fff;
		font-size: 14px;
		border-radius: 24px;
	}
	.arrowsIcon{
		width: 7px;height: 12px;margin-left: 10px;vertical-align: middle;
	}
	.top-background{
		width: 750rpx;
		height: 363rpx;
		background-image: url(../../static/person/person_backgroud.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		position: relative;
		.user-info{
			position: absolute;
			top: 160rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			text{
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.login_btn{
			  padding: 0;
			  /*margin: 0;*/
			  background: none;
			  border: none;
			  color: #ffffff;
			}
			.login_btn::after,.nick_name>.phone-btn::after{
			  border: none;
			}
		}
		.member{
			width: calc(100vw - 60rpx);
			height: 140rpx;
			position: absolute;
			top: 280rpx;
			// bottom: -26px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #2C2C2C;
			border-radius: 20rpx;
			/* background-image: url(../../static/person/member_content.png);
			background-size: 100% auto;
			background-repeat: no-repeat; */
			display: flex;
			justify-content: space-between;
			align-items: center;
			.member-text{
				color: #F2C991;
				font-size: 14px;
				display: flex;
				flex-direction: column;
				margin-left: 28px;
			}
			.member-button{
				width: 80px;
				height: 30px;
				background-color: #EBC28D;
				border-radius: 15px;
				line-height: 30px;
				text-align: center;
				font-size: 12px;
				color: #3A362D;
				margin-right: 15px;
			}
		}
	}

	/* 列表栏 */

	.list {
		width: calc(100vw - 40rpx);
		margin: 20rpx;
		background: #ffffff;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.list_item, navigator {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.list_item > navigator {
		border-bottom: none;
	}

	.list_item > button {
		width: 100%;
		height: 100rpx;
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		padding: 0;
	}

	.list_item > button::after {
		border: none;
	}

	.list_item > text:nth-child(1) {
		margin-left: 30rpx;
	}

	navigator > text:nth-child(1) {
		margin-left: 30rpx;
	}

	button > text:nth-child(1) {
		margin-left: 30rpx;
	}

	.list_item > image,navigator > image, button > image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 24rpx 0 30rpx;
	}

	.list_item_arrow {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		margin-right: 20rpx;
	}

	.list_item_arrow > image {
		width: 14rpx;
		height: 22rpx;
	}

	.phone-spec {
		display: flex;
		align-items: center;

		text {
			margin-right: 20rpx;
			color: grey;
		}
	}

</style>
